import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';
import MobX from 'mobx';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';


@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ModelsDialog';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderDialog() {
        // (1:定制馆,2:体验馆,3:艺术家馆,4:少儿馆,5:机构馆)
        let typeList = [{type: 2, text: '体验馆'}, {type: 4, text: '少儿馆'}, {type: 3, text: '艺术家馆'}, {
            type: 5,
            text: '机构馆'
        }, {type: 1, text: '定制馆'}];
        let hiddenList = [{type: 0, text: '显示'}, {type: 1, text: '隐藏'}];
        return (
            <div className={this.store.visible ? 'models-mask fade-in' : 'models-mask fade-out'}
                 onClick={() => this.store.closeDialog()}>
                <div className="models-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="models-header">
                        <span className="header-title">{this.store.isUpdate ? '修改展馆' : '添加展馆'}</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div className="models-content">
                        <div className="models-cover-info">
                            <div className="thumb-image-wrapper">
                                {
                                    !this.store.cover ?
                                        <div className="upload-cover">
                                            <div className="add-img-btn"
                                                 onClick={() => this.refs.avatarFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>添加封面</p>
                                                <input type='file'
                                                       ref="avatarFile"
                                                       onChange={(e) => this.store.filesOnChange(e, this.refs.avatarFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>

                                        </div> :
                                        <div className="upload-cover">
                                            <img
                                                src={this.store.isUpdateCover ? this.store.cover : $$.utils.pictureThumb(this.store.cover, true)}
                                                alt=""/>
                                            <div className="upload-btn"
                                                 onClick={() => this.refs.avatarFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>更换封面</p>
                                                <input type='file'
                                                       ref="avatarFile"
                                                       onChange={(e) => this.store.filesOnChange(e, this.refs.avatarFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>
                                        </div>
                                }
                            </div>
                            <div className="thumb-image-wrapper">
                                {
                                    !this.store.interior ?
                                        <div className="upload-cover">
                                            <div className="add-img-btn"
                                                 onClick={() => this.refs.interiorFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>添加预览图</p>
                                                <input type='file'
                                                       ref="interiorFile"
                                                       onChange={(e) => this.store.interiorFileOnChange(e, this.refs.interiorFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>

                                        </div> :
                                        <div className="upload-cover">
                                            <img
                                                src={this.store.isUpdateInterior ? this.store.interior : $$.utils.pictureThumb(this.store.interior, true)}
                                                alt=""/>
                                            <div className="upload-btn"
                                                 onClick={() => this.refs.interiorFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>更换预览图</p>
                                                <input type='file'
                                                       ref="interiorFile"
                                                       onChange={(e) => this.store.interiorFileOnChange(e, this.refs.interiorFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>
                                        </div>
                                }
                            </div>
                            <div className="thumb-image-wrapper">
                                {
                                    !this.store.floorPlan ?
                                        <div className="upload-cover">
                                            <div className="add-img-btn"
                                                 onClick={() => this.refs.floorPlanFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>添加平面图</p>
                                                <input type='file'
                                                       ref="floorPlanFile"
                                                       onChange={(e) => this.store.floorPlanFileOnChange(e, this.refs.floorPlanFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>

                                        </div> :
                                        <div className="upload-cover">
                                            <img
                                                src={this.store.isUpdateFloorPlan ? this.store.floorPlan : $$.utils.pictureThumb(this.store.floorPlan, true)}
                                                alt=""/>
                                            <div className="upload-btn"
                                                 onClick={() => this.refs.floorPlanFile.click()}>
                                                <ReIcon className="icon" icon="sign_out"/>
                                                <p>更换平面图</p>
                                                <input type='file'
                                                       ref="floorPlanFile"
                                                       onChange={(e) => this.store.floorPlanFileOnChange(e, this.refs.floorPlanFile)}
                                                       accept="image/jpg,image/png,image/jpeg"/>
                                            </div>
                                        </div>
                                }
                            </div>
                        </div>
                        <div className="info-right">
                            <div className="info-text-wrapper">
                                <div className="info-text-flex flex3">
                                    <span className="info-text-label">展馆名称</span>
                                    <ReTextField
                                        isLabel={false}
                                        type="text"
                                        className="work-input"
                                        notfullWidth={false}
                                        onChange={(e, v) => this.store.modelNameChange(v)}
                                        errorText={''}
                                        maxLength="40"
                                        closeHandler={() => this.store.closeHandle()}
                                        value={this.store.modelName}
                                        placeholder={'输入展馆名称'}/>
                                </div>
                                <div className="info-text-flex">
                                    <span className="info-text-label">作品数量</span>
                                    <ReTextField
                                        isLabel={false}
                                        type="number"
                                        className="work-input"
                                        notfullWidth={false}
                                        onChange={(e, v) => this.store.countChange(v)}
                                        errorText={''}
                                        maxLength="3"
                                        supportIntOnly={true}
                                        descText="张"
                                        value={this.store.recommendCount}
                                        placeholder={'推荐作品数量'}/>
                                </div>
                            </div>
                            <div className="info-text-wrapper">
                                <div className="info-text-flex">
                                    <span className="info-text-label">面积</span>
                                    <ReTextField
                                        isLabel={false}
                                        type="number"
                                        className="work-input"
                                        notfullWidth={false}
                                        maxLength="9"
                                        onChange={(e, v) => this.store.areaSizeChange(v)}
                                        errorText={''}
                                        descText="m²"
                                        value={this.store.areaSize}
                                        placeholder={'面积'}/>
                                </div>
                                <div className="info-text-flex">
                                    <span className="info-text-label">展线</span>
                                    <ReTextField
                                        isLabel={false}
                                        type="number"
                                        className="work-input"
                                        notfullWidth={false}
                                        onChange={(e, v) => this.store.modelLengthChange(v)}
                                        errorText={''}
                                        supportIntOnly={true}
                                        maxLength="9"
                                        descText="cm"
                                        value={this.store.modelLength}
                                        placeholder={'展线'}/>
                                </div>
                                <div className="info-text-flex">
                                    <span className="info-text-label">高度</span>
                                    <ReTextField
                                        isLabel={false}
                                        type="number"
                                        className="work-input"
                                        notfullWidth={false}
                                        onChange={(e, v) => this.store.modelHeightChange(v)}
                                        errorText={''}
                                        supportIntOnly={true}
                                        maxLength="9"
                                        descText="cm"
                                        value={this.store.modelHeight}
                                        placeholder={'高度'}/>
                                </div>
                            </div>
                            <div className="type-list-wrapper">
                                {
                                    typeList.map((item, index) => {
                                        let active = item.type === this.store.type;
                                        return (
                                            <div key={index} className="type-item">
                                                    <span onClick={() => this.store.typeChange(item.type)}
                                                          className={active ? 'radio-button active' : 'radio-button'}>
                                                        <ReIcon icon="define" className="icon"/>
                                                    </span>
                                                <span>{item.text}</span>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className="models-config">
                            <div className="models-config-div">
                                <span className="config-text">展馆配置</span>
                                <ReSelectField
                                    type=""
                                    className="work-input"
                                    isOpen={false}
                                    list={MobX.toJS(this.store.configList)}
                                    value={this.store.configId}
                                    placeholder={'展馆配置(与哪个馆相同)'}
                                    onChange={(v) => this.store.configChange(v.value)}/>
                            </div>
                            <div className="models-config-div">
                                <span className="config-text">展馆模型</span>
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.modelDataHrefChange(v)}
                                    errorText={''}
                                    value={this.store.modelDataHref}
                                    placeholder={'展馆模型链接(model)'}/>
                            </div>
                            <div className="models-config-div">
                                <span className="config-text">展馆碰撞</span>
                                <ReTextField
                                    isLabel={false}
                                    type="text"
                                    className="work-input"
                                    notfullWidth={false}
                                    onChange={(e, v) => this.store.collisionDataHrefChange(v)}
                                    errorText={''}
                                    value={this.store.collisionDataHref}
                                    placeholder={'展馆碰撞链接(collision)'}/>
                            </div>
                        </div>
                        <div className="model-hidden-wrapper">
                            {
                                hiddenList.map((item, index) => {
                                    let active = item.type === this.store.hidden;
                                    return (
                                        <div key={index} className="type-item">
                                                    <span onClick={() => this.store.hiddenChange(item.type)}
                                                          className={active ? 'radio-button active' : 'radio-button'}>
                                                        <ReIcon icon="define" className="icon"/>
                                                    </span>
                                            <span>{item.text}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>

                        <div className="button-wrapper">
                            <ReButton label={'确定'} className="button-confirm"
                                      onClick={() => this.store.confirmDialog()}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {
        return (
            <div className="orin-s-modelsdialog-root">
                {this.renderDialog()}
            </div>
        );
    }
}